<template>
  <view style="padding: 2vw;">

    <!-- <view class="">
      {{page}}
    </view> -->

    <!-- 排序导航 -->
    <uni-segmented-control :current="order" :values="orders" @clickItem="changeOrder"></uni-segmented-control>

    <scroll-view scroll-y="true">
      <view class="" v-for="d in list">
        <!-- 无图模式 -->
        <view class="news-border" v-if="d.imgs.length==0">
          <text @click="showDetail(d.id)">{{d.title}}</text>
          <view class="news-footer">
            <text>{{d.source}}</text>
            <text>{{d.likes}}点赞</text>
            <text>{{d.comments}}评论</text>
            <text>{{ d.createdAt }}</text>
          </view>
        </view>
        <!-- 单图模式 -->
        <view class="news-border" v-else-if="d.imgs.length<3">
          <view class="news-img">
            <view class="info">
              <text @click="showDetail(d.id)">{{d.title}}</text>
              <view class="news-footer">
                <text>{{d.source}}</text>
                <text>{{d.likes}}点赞</text>
                <text>{{d.comments}}评论</text>
                <text>{{ d.createdAt }}</text>
              </view>
            </view>
            <view>
              <view class="bg-img" :style="`background-image: url(${d.imgs[0]});`"/>
            </view>

          </view>


        </view>
        <!-- 三图模式 -->
        <view class="news-border" v-else>
          <view class="">
            <text @click="showDetail(d.id)">{{d.title}}</text>
            <view class="news-footer">
              <text>{{d.source}}</text>
              <text>{{d.likes}}点赞</text>
              <text>{{d.comments}}评论</text>
              <text>{{ d.createdAt }}</text>
            </view>
          </view>

          <view class="imgs">
            <view class="bg-img" :style="`background-image: url(${d.imgs[0]});`"/>
            <view class="bg-img" :style="`background-image: url(${d.imgs[1]});`"/>
            <view class="bg-img" :style="`background-image: url(${d.imgs[2]});`"/>
          </view>

        </view>


      </view>
      <uni-load-more :status="more" :content-text="moreText" @clickLoadMore="loadMore"></uni-load-more>

    </scroll-view>

    <image @click="requery" class="refresh" src="/static/refresh.png" mode="widthFix"></image>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    api,
    tools
  } from '@/js/api.js'
  import {
    onLoad
  } from '@dcloudio/uni-app'

  onLoad(() => {
    query()
  })

  const showDetail = (id) => {
    uni.navigateTo({
      url: `/pages/news/detail?id=${id}`,
    })
  }

  const page = ref({
    "pageSize": 10,
    "pageNumber": 1,
  })

  const requery = () => {
    page.value.pageNumber = 1
    list.value = []
    query()
  }

  const order = ref(0)
  const orders = ref(['最新', '高赞', '最热', '热评'])

  const changeOrder = (event) => {
    page.value.pageNumber = 1
    order.value = event.currentIndex
    list.value = []
    query()
  }

  const queryInfo = ref({
    title: ''
  })

  const list = ref([])

  const more = ref('more')
  const moreText = ref({
    contentdown: "点击加载更多",
    contentrefresh: "正在加载中...",
    contentnomore: "我是有底线的"
  })

  const loadMore = () => {
    page.value.pageNumber++;
    if (page.value.pageNumber > page.value.pageCount) {
      more.value = 'noMore'
      return
    }
    query()
  }

  const query = () => {
    more.value = 'loading'
    api.get(
      `/autodata/query/news/${page.value.pageSize}/${page.value.pageNumber}/${order.value + 1}`, queryInfo.value,
      (data) => {
        if (data.success) {
          more.value = 'more'
          page.value = data.data.pageBean
          // 分离图片列表为数组
          data.data.list.forEach((item) => {
            item.imgs = item.imgs.split(',')
            item.createdAt = tools.formatDate(
              item.createdAt, 'MM-dd')
          })
          list.value = list.value.concat(data.data.list)
          return
        }
        uni.showModal({
          title: '错误',
          content: data.message
        })
      }
    )
  }
</script>

<style scoped>
  .imgs {
    display: flex;
    justify-content: space-around;
  }

  .news-img {
    display: flex;
  }

  .news-img>.info {
    flex: 1;
  }

  .bg-img {
    width: 30vw;
    height: 18vw;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-image: url(''); */
  }

  .news-border {
    padding: 0.5rem 0px;
    border-bottom: 1px solid #dcdcdc;
  }

  .news-footer {
    font-size: 0.8em;
    color: #666;
    padding: 0.5rem 0px;
  }

  .news-footer:deep(uni-text) {
    margin-right: 0.2rem;
  }

  .refresh {
    width: 2rem;
    position: fixed;
    right: 1rem;
    bottom: calc(var(--window-bottom) + 1rem);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
  }
</style>